<template>
    <div style="height: 100%;">

        <div class="title">费用明细导入</div>
        <avue-crud ref="crud" :data="tableData" :table-loading="dataListLoading" :option="{
            searchMenuSpan: 4,
            columnBtn: false,
            border: true,
            index: true,
            indexLabel: '序号',
            stripe: true,
            menuAlign: 'center',
            align: 'center',
            addBtn: false,
            addRowBtn: true,
            editBtn: false,
            delBtn: true,
            menu: false,
            highlightCurrentRow: true,
            searchSpan: 5,
            menuWidth: 100,
            showSummary: false,
            selection: true,
            // height: ,
            column:tableColumn
        }" :page="page" @search-change="searchChange" @on-load="getList" @refresh-change="refreshChange">
            <template slot="menuLeft">
                <el-button type="success" @click="handelSave" size="small" :loading="loading">保存</el-button>
                <el-button type="primary" @click="handelImport" size="small">导入</el-button>
                <!-- <el-button type="primary" @click="handelImport" size="small">导入模板</el-button> -->
                <!-- <el-button type="danger" @click="deleteHandle()" size="small">新增</el-button> -->
                <el-button type="danger" @click="deleteHandle()" size="small">删除</el-button>
            </template>
        </avue-crud>


    </div>
</template>

<script>
import { excelToData } from '@/utils/upload';
export default {
    data() {
        return {
            buttonList: [
                { name: "保存", code: "save", type: "success" },
                { name: "导入", code: "import", type: "primary" },
                { name: "新增", code: "add", type: "primary" },
                { name: "删除", code: "delete", type: "danger" },
            ],
            dataListLoading: false,
            loading: false,
            tableData: [

            ],
            tableColumn: [

                { prop: 'feeDate', label: '费用日期', cell: true },
                { prop: 'feeType', label: '费用类型', cell: true },
                { prop: 'feeAmt', label: '费用金额', cell: true },
                { prop: 'relCustCode', label: '客户编码', cell: true },
                { prop: 'relCustCode', label: '客户名称', cell: true },
                { prop: 'relDeptCode', label: '部门编码', cell: true },
                { prop: 'relDeptName', label: '部门名称', cell: true },
                { prop: 'relPersonCode', label: '相关人员编码', cell: true },
                { prop: 'relPersonName', label: '相关人员名称', cell: true },
                { prop: 'feeBiz', label: '费用备注', cell: true },
                { prop: 'biz1', label: '备注1', cell: true },
                { prop: 'biz2', label: '备注2', cell: true },
                { prop: 'biz3', label: '备注3', cell: true },
                { prop: 'biz4', label: '备注4', cell: true },
                { prop: 'biz5', label: '备注5', cell: true },
                { prop: 'biz6', label: '备注6', cell: true },
            ],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },


        }
    },
    mounted() {

    },
    methods: {
        deleteHandle(type) {

            this.$confirm(`确定进行批量删除操作?`, '友情提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl(`/crm/okr/deleteOkrInfo`),
                        method: 'delete',
                        data: this.$http.adornData({
                            type: type,
                            ids: ids
                        }, false)
                    }).then(({ data }) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getSourceDataList(this.page)
                            }
                        })
                    })
                })
                .catch(() => { })
        },
        searchChange(params, done) {
            this.getList(this.page, params, done)
        },
        refreshChange() {
            this.getList(this.page)
        },

        getList(page, params, done) {
            console.log('page,params,done:', page, params, done);
            this.dataListLoading = true;
            this.$http({
                url: this.$http.adornUrl(`/crm/pageCrmJxcFeedtl`),
                method: 'get',
                data: this.$http.adornData({
                    current: page.currentPage,
                    size: page.pageSize,
                }, false)
            }).then(({ data }) => {
                console.log('data:', data);
                this.tableData = data.obj.records
                this.page.total = data.obj.total
                this.dataListLoading = false
            })

        },
        oprClick() {
            this.$refs.departmentRef.init()
        },
        async handelImport() {
            const headerMap =  {}
            this.tableColumn.forEach(element => {
                headerMap[element.label] = element.prop
            });
            const res = await excelToData(headerMap);
            const data = res.formatData;
            this.tableData.push(...data)

        },
        async handelSave() {
            console.log('this.tableData:', this.tableData);
            const addData = this.tableData.filter(i => !i.id);
            if (!addData.length) {
                this.$message({
                    message: '没有要保存的数据',
                    type: 'warning',
                    duration: 1500,
                })
                return
            }
            this.loading = true
            this.$http({
                url: this.$http.adornUrl(`/crm/addCrmJxcFeedtl`),
                method: 'POST',
                data: this.$http.adornData(addData, false)
            }).then(({ data }) => {

                console.log('data:', data);
                this.getList(this.page)
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.loading = false
                    }
                })
            }).finally(() => {
                // this.loading = false
            })

        },

    }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
</style>
